<template>
  <div class="h-input-search">
    <a-input-search
        :allowClear="true"
        class="h-input-search-input"
        v-model="value"
        @focus="globalSearchFocus"
        @change="filterOption"
        :placeholder="placeholder"
    >
      <template slot="enterButton">
        <a-button @click="searchBtnClick">
          搜索
        </a-button>
      </template>
    </a-input-search>
    <template v-if="selectVisible">
      <div class="h-input-search-select" @click="searchSelectEventChange">
        <ul class="h-input-search-select-ul" v-if="searchSelectOptions.length > 0">
          <li v-for="(searchSpan, index) in searchSelectOptions" :key="index" @click="() => searchSelectOnchange(searchSpan)">
            <span v-html="`<span>${searchSpan.title}</span><span style='color: #bec5d0'>${searchSpan.markLabel}</span>`"/>
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import _ from 'lodash';

const recursionMenuFunction = (menu) => {
  let recursionMenu = [];
  const reduceObject = {};
  const mark = {label: ''};

  const recursion = (menuList = menu) => {
    menuList && menuList.forEach((item) => {
      if (item.itemMark) {
        mark.label = item.itemMark;
      }
      item.markLabel = mark.label;
      if (item.data && item.data.length) {
        recursion(item.data);
      } else if (item.children && item.children.length) {
        recursion(item.children);
      } else {
        recursionMenu.push(item);
      }
    })
  }
  recursion();
  recursionMenu = recursionMenu.reduce((cur, next) => {
    if (!reduceObject[next.id]) {
      reduceObject[next.id] = next.id && cur.push(next)
    }
    return cur
  }, [])
  return recursionMenu.map(item => {
    if (!item.title) {
      item.title = item.name ? item.name : item.title;
    }
    item.name = item.title;
    return item;
  });
};

export default {
  name: "GlobalSearch",
  props: {
    searchMenu: {
      type: [Array],
      default: () => ([]),
    },
    placeholder: {
      type: [String],
      default: () => '',
    },
    inputSearchChange: {
      type: [Function],
      default: (e) => e,
    },
    customValue: {
      type: [String],
      default: () => '',
    },
  },
  data() {
    return {
      value: this.customValue,
      selectVisible: false,
      searchSelectOptions: [],
    }
  },
  created() {
    window.addEventListener('CleanSearchInput', () => {
      this.value = '';
    })
  },
  watch: {
    value: {
      deep: true,
      handler: function (value) {
        if (value === '') {
          this.searchSelectOnchange(undefined)
        }
        this.filterSelectOptions(value);
        this.$emit('update:changeCustomValue', value);
      }
    },
    customValue: {
      deep: true,
      handler: function (value) {
        this.value = value;
      }
    }
  },
  mounted() {
    document.addEventListener('click', (e) => {
      const className = e.target.getAttribute('class');
      if (className === 'ant-input' || className === 'h-input-search-select-ul-item' || className === 'ant-btn ant-input-search-button') {
        return true;
      } else {
        this.selectVisible = false;
      }
    });
  },
  methods: {
    searchSelectOnchange(value) {
      if (value) {
        const {id, name: label} = value;
        this.$emit('searchSelectOnchange', {
          id,
          label
        })
      }
      // this.$emit('searchSelectOnchange', value)
    },
    searchBtnClick() {
      this.selectVisible = true;
      this.filterSelectOptions(this.customValue)
    },
    searchSelectEventChange(e) {
      const {target: {innerText}} = e;
      this.value = innerText;
    },
    filterOption(inputValue) {
      const {target: {value}} = inputValue;
      this.filterSelectOptions(value);
      this.$emit('update:changeCustomValue', value);
    },
    filterSelectOptions(value) {
      this.searchMenu.forEach((item) => {
        item.itemMark = item.title;
      });
      this.searchSelectOptions = _.cloneDeep(recursionMenuFunction(this.searchMenu)).filter(item => {
        if (item.title.indexOf(value) > -1 && item.markLabel !== '业务中心') {
          item.title = item.title.replace(new RegExp(value, 'g'), `<span style='color: #3296fa' class="primary-title">${value}</span>`);
          return item;
        }
      });
    },
    globalSearchFocus(e) {
      this.value = '';
      this.selectVisible = true;
      const {target: {value}} = e;
      this.filterSelectOptions(value);
    }
  }
}
</script>

<style scoped lang="less">
.h-input-search {
  width: 400px;
  padding-left: 15%;
  box-sizing: content-box;

  .ant-input-search-button {
    color: white;
    background: #f1960f;
    border: 1px solid #f1960f;
  }

  .h-input-search-select {
    position: absolute;
    max-height: 250px;
    width: 400px;
    z-index: 9999;
    background: white;
    border-radius: 4px;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: auto;
    transform: translateZ(0px);
    margin-top: 4px;

    > ul {
      padding: 4px 0;

      > li {
        user-select: none;
        overflow: hidden;
        cursor: pointer;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        padding: 5px 12px;
        text-overflow: ellipsis;
        transition: background 0.3s ease;


        > span {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }

      > li:hover {
        background: #e6f7ff;
      }
    }
  }
}
</style>
